import router, { asyncRoutes } from '@/router'
import store from '@/store'
import Nprogress from 'nprogress'
import 'nprogress/nprogress.css'

// 定义白名单页面
const whiteList = ['/login', '/404']
// 前置导航守卫，路由跳转之前都会进前置守卫
router.beforeEach(async(to, from, next) => {
  Nprogress.start()
  //   1、判断是否有token
  const token = store.getters.token
  if (token) {
    if (to.path === '/login') {
      next('/')
      Nprogress.done()
    } else {
      // 放行之前先获取用户信息
      // 先判断是否已经获取过用户信息了，如果获取过就不再获取
      // 1、添加时机,获取资料的时候
      if (!store.getters.userId) {
        const { roles: { menus = [] }} = await store.dispatch('user/getUserInfo') // 获取用户信息的action
        console.log(menus) // 1、当前用户拥有的页面权限信息
        //   最终要得到的结果是一个动态路由数组 >> 当前用户拥有权限的动态路由数组
        console.log(asyncRoutes) // 动态路由数组
        // 当前用户拥有权限的动态路由数组
        const filterRoutes = asyncRoutes.filter(item => {
          // 判断条件怎么写
          return menus.includes(item.meta.permission)
        })
        // 添加一份到vuex >> 进行左侧菜单渲染
        // 把静态路由数组和当前用户拥有权限的动态路由数组合并之后存储到vuex
        store.commit('user/SET_ROUTES', filterRoutes)
        // console.log(filterRoutes)
        router.addRoutes([...filterRoutes, { path: '*', redirect: '/404', hidden: true }]) // 筛选得到结果之后通过router.addRoutes进行添加到路由表
        // 添加完毕之后，需要重新再跳转一次
        next(to.path) // 因为vue-router的已知缺陷，重新跳一次即可解决，不重新跳页面可能会触问题
        // console.log(router)
        //  调用
        //  这个地方进行动态路由添加
        //  当前用户有哪些权限
        //  所有的动态路由
        //  筛选得到结果之后通过router.addRoutes进行添加到路由表
      }
      // 必须获取完用户信息之后再跳转页面
      // 目标页面可能会用到用户信息

      // 权限管理？
      // 怎么样做到不同的用户登录进去系统的时候，可以访问到的路由和左侧菜单都是不一样的。
      // 面试的时候，如果遇到不会的，不能尬住。
      // vuex管理数据
      // 获取个人信息
      next()
    }
  } else {
    if (whiteList.includes(to.path)) {
      next()
    } else {
      next('/login')
      Nprogress.done()
    }
  }
})

// 后置导航守卫，路由跳转之后都会进后置守卫

// 权限管理的设计

router.afterEach(() => {
  Nprogress.done()
})
